<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="80px">
        <el-form-item label="品牌">
          <el-select v-model="obj.brand" filterable placeholder="请选择品牌" @change="changeBrand">
            <el-option
              v-for="item in brands"
              :key="item.brand"
              :label="item.brand"
              :value="item.brand"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="型号">
            <el-select v-model="obj.model" filterable placeholder="请选择型号" >
          <el-option
            v-for="item in obj.models"
            :key="item.model"
            :label="item.model"
            :value="item.model">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { reqGetTypesByRecycleTypeAndModel } from '@/api/check.js'
export default {
  name: 'brandAndModel',
  props: ['brands', 'models', 'typeId', 'dialogVisible', 'brand', 'model'],
  data () {
    return {
      obj: {
        brand: this.brand,
        model: this.model,
        models: null
      }

    }
  },
  watch: {
    models: {
      handler (val) {
        this.obj.models = val
      },
      immediate: true

    }
  },
  mounted () {

  },
  methods: {

    changeBrand (val) {
      this.obj.model = null
      this.getModels(this.typeId, val)
    },

    // 获取所有型号
    async getModels (typeId, brandId) {
      console.log(typeId, brandId)
      const res = await reqGetTypesByRecycleTypeAndModel(typeId, brandId)
      if (res.data.code == 0) {
        this.obj.models = res.data.data
      }
    },
    init () {
      this.obj.model = this.model
      this.obj.brand = this.brand
      this.obj.models = this.models
    },
    handleClose () {
      this.$emit('update:dialogVisible', false)
      this.init()
    },
    onSubmit () {
      if ((!this.obj.brand) || (!this.obj.model)) {
        return this.$message.error('品牌与型号不能为空')
      }
      this.$emit('updateBrandAndModel', this.obj)
      // 该设备不存在
    }
  }
}
</script>

<style>
</style>
